<template>
  <Layout class="layout-wrapper">
    <Header class="bg-white px-0 layout-header">
      <Menu
        mode="horizontal"
        class="d-flex align-items-center"
        theme="light"
        :active-name="topActive"
        @on-select="handleTopMenuSelect"
      >
        <div class="menu-logo">企业网盘</div>
        <MenuItem :name="index" v-for="(item, index) in topMenus" :key="index">
          <Icon :type="item.icon" />
          {{ item.title }}
        </MenuItem>
        <div class="ml-auto mr-3">
          <Dropdown placement="bottom-end">
            <a href="javascript:void(0)">
              <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
              {{username}}
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem>个人资料</DropdownItem>
              <DropdownItem>修改密码</DropdownItem>
              <DropdownItem @click.native="logout">安全退出</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </Menu>
    </Header>
    <Layout>
      <Sider hide-trigger class="slider">
        <Menu
          theme="light"
          :active-name="sliderActive"
          @on-select="handleSliderMenuSelect"
          width="200"
          class="slider-menu"
        >
          <MenuGroup title="全部文件">
            <MenuItem name="1">
              <Icon type="md-document" />
              全部
            </MenuItem>
            <MenuItem name="2">
              <Icon type="md-document" />
              图片
            </MenuItem>
            <MenuItem name="3">
              <Icon type="md-chatbubbles" />
              视频
            </MenuItem>
          </MenuGroup>
          <MenuGroup title="其他操作">
            <MenuItem name="5">
              <Icon type="md-heart" />
              我的分享
            </MenuItem>
            <MenuItem name="6">
              <Icon type="md-leaf" />
              回收站
            </MenuItem>
          </MenuGroup>
        </Menu>

        <div class="slider-capacity p-3">
          <!-- 网盘容量的进度条 -->
          <Progress
            :percent="10"
            hide-info
            :stroke-color="['#108ee9', '#87d068']"
          />
          <!-- 网盘容量的文字提示 -->
          <div class="d-flex justify-content-between mt-2">
            <span class="small">总共:100GB</span>
            <span class="small text-warning">已用:10GB</span>
          </div>
        </div>
      </Sider>
      <Content class="layout-content">
        <div class="content-box">
          <router-view />
        </div>
      </Content>
    </Layout>
  </Layout>
</template>

<script>
import {userLogout} from '../api/user.js'
export default {
  data() {
    return {
      sliderActive: 1,
      topActive: 0,
      topMenus: [
        {
          icon: "ios-paper",
          title: "⽹盘",
        },
        {
          icon: "ios-people",
          title: "分享",
        },
        {
          icon: "ios-construct",
          title: "更多",
        },
      ],
      username:'',
    };
  },
  created(){
    this.username = this.$store.state.user.username
    console.log(this.username);
  },
  methods: {
    //获取并设置点击的菜单下标
    handleTopMenuSelect(index) {
      this.topActive = index;
    },
    //获取并设置点击的侧边导航菜单下标
    handleSliderMenuSelect(index) {
      this.sliderActive = index;
    },
    // 退出登录
    async logout(){
      const {data:res} = await userLogout()
      console.log(res);
      if(res.msg == 'ok'){
        window.localStorage.clear();
        this.$store.commit('tuichu')
        this.$router.push('/');
        this.$Message.success('退出成功')
      }
    }
  },
};
</script>

<style scoped="scoped">
.layout-wrapper {
  height: 100%;
}

.layout-header {
  height: 60px;
  line-height: 60px;
}

.menu-logo {
  font-size: 25px;
  width: 200px;
  text-align: center;
}

.slider,
.slider-menu {
  background-color: #ebf0f1;
}

.slider-capacity {
  width: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  /* border: 1px solid #aaa; */
}
/* /deep/ .ivu-progress-inner{
		background-color: #fff!important;
		border:1px solid #eee!important;
	} */
.Progress {
  border: 1px solid #eee !important;
}
.layout-content {
  height: 100%;
  position: relative;
}
.content-box {
  position: absolute;
  overflow-y: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
</style>
